<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
<div>div</div>
<p>p</p>
<div>div</div>
<span>span</span>
<p>p</p>
<div>div</div>


<script>
    var divs = document.getElementsByTagName('div');
    var ps = document.getElementsByTagName('p');


    for(var i=0;i<divs.length;i++){
       divs[i].style.border = '1px solid red';
    }

    for(var i=0;i<ps.length;i++){
        ps[i].style.border = '1px solid blue';
    }


    //优化
    //1.将for循环封装成方法
    // function css(elems,styles){ ... } -> undefined
    //2.优化一下前面的函数
    //function css (obj) { ... }
    //obj:{ elems:[],style:{ ... }}
    //3.应该将for循环封装成each或map的方法，这样就可以处理任意的遍历了

    //现在是要封装库或框架，这时一定要考虑通用性

    //4.使用 qsa方法封装元素获取
</script>
</body>
</html>